<script setup lang="ts">
import EchartBar from '@/components/Echart/Bar/BarChart.vue'
import * as echarts from 'echarts'
import { computed, reactive, watch } from 'vue'
import { headersStore } from '@/stores/apiHeader'
import { storeToRefs } from 'pinia'
import { useHomeStore } from '@/stores/module/home'

import { useDialogStore } from '@/stores/dialog'
import {
  DEFAULT_ECHARTS_FONTSIZE,
  DIALOG_ECHARTS_FONTSIZE,
} from '@/Utils/setting'
const dialogStore = useDialogStore()
const { dialogInfo: yourNewName } = dialogStore
const fontSize = yourNewName.visible
  ? DIALOG_ECHARTS_FONTSIZE
  : DEFAULT_ECHARTS_FONTSIZE
const dialogInfoVisible = yourNewName.visible
const homeStore = useHomeStore() // 创建store实例
const { homeNationalPerformanceMoM } = storeToRefs(homeStore)
//遍历接口数据拿到想要的数据
const getAreaName = () => {
  const areaName = []
  homeNationalPerformanceMoM.value?.info?.forEach((item) => {
    areaName.push(item.name)
  })
  return areaName
}

//遍历接口数据拿到想要的数据
const getAreaValue = () => {
  const areaValue = []
  homeNationalPerformanceMoM.value?.info?.forEach((item) => {
    areaValue.push(item.value)
  })
  return areaValue
}

const getAreaSuffix = () => {
  const areaSuffix = []
  homeNationalPerformanceMoM.value?.info?.forEach((item) => {
    areaSuffix.push('(' + item.suffix + ')')
  })
  return areaSuffix
}

const formatter = () => {
  const areaValue = getAreaValue()
  const areaSuffix = getAreaSuffix()
  return areaValue.map((value, index) => {
    const suffix = areaSuffix[index] || ''
    return `${value}${suffix}`
  })
}
var newFormatter = formatter()
var [a, b] = newFormatter
newFormatter = [b, a]
// 调整px到合适的大小
const changePixelSize = (px: number) => {
  // 获取当前屏幕宽度
  const width = document.body.clientWidth
  let res = (px / 1920) * width
  // 保留整数
  return parseInt(res.toFixed(0))
}

//获取当前月份
const month = computed(() => {
  return headersStore().month
})
//echarts配置项
let chartData = reactive({
  name: 'nationalComparisonLastYear',

  xAxis: {
    type: 'value',
    show: false,
  },
  yAxis: [
    {
      type: 'category',
      data: getAreaName(),
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      inverse: true,
      axisLabel: {
        color: '#ffffff',
        fontSize: changePixelSize(fontSize),
      },
    },
    {
      type: 'category',
      data: newFormatter,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: '#ffffff',
        fontSize: changePixelSize(fontSize),
      },
    },
  ],
  grid: {
    left: '10%',
    right: '10%',
    bottom: '5%',
    top: '20%',
    containLabel: true,
  },
  legend: {
    data: getAreaName(),
    top: '10%',
    itemWidth: changePixelSize(17),
    itemHeight: changePixelSize(10),
    textStyle: {
      color: '#DEEBFF',
      fontSize: changePixelSize(fontSize),
    },
  },
  series: [
    {
      type: 'bar',
      name: getAreaName()[1],
      barWidth:
        dialogInfoVisible == false ? changePixelSize(10) : changePixelSize(25),
      data: [0, Number(getAreaValue()[1])],
      barGap: '-100%',
      showBackground: true,
      backgroundStyle: {
        borderRadius:
          dialogInfoVisible == false
            ? changePixelSize(10)
            : changePixelSize(25),
      },
      itemStyle: {
        borderRadius:
          dialogInfoVisible == false ? changePixelSize(5) : changePixelSize(15),
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: '#f74c3e' },
          { offset: 1, color: '#fda543' },
        ]),
      },
    },
    {
      type: 'bar',
      name: getAreaName()[0],
      barWidth:
        dialogInfoVisible == false ? changePixelSize(10) : changePixelSize(25),
      data: [Number(getAreaValue()[0])],
      barGap: '-100%',
      showBackground: true,
      backgroundStyle: {
        borderRadius:
          dialogInfoVisible == false
            ? changePixelSize(10)
            : changePixelSize(25),
      },
      itemStyle: {
        borderRadius:
          dialogInfoVisible == false ? changePixelSize(5) : changePixelSize(15),
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: '#0cf1df' },
          { offset: 1, color: '#0b80e9' },
        ]),
      },
    },
  ],
})
watch(
  () => homeNationalPerformanceMoM.value,
  () => {
    chartData.yAxis[0].data = getAreaName()
    chartData.yAxis[1].data = formatter()
    chartData.series[0].name = getAreaName()[1]
    chartData.series[0].data = [0, Number(getAreaValue()[1])]
    chartData.series[1].name = getAreaName()[0]
    chartData.series[1].data = [Number(getAreaValue()[0])]
  }
)
</script>
<template>
  <card-box componentName="nationalComparisonLastYear">
    <template v-slot:title>
      <h1
        :class="{
          subtitle: dialogInfoVisible,
        }"
      >
        {{ homeNationalPerformanceMoM.title }}
      </h1>
    </template>
    <EchartBar
      :chart-data="chartData"
      v-if="homeNationalPerformanceMoM"
    ></EchartBar>
    <div v-else class="default-img">
      <p>{{ $t('bi_common_nodata') }}</p>
    </div>
  </card-box>
</template>
<style lang="scss" scoped>
.default-img {
  width: 100%;
  text-align: center;
  padding: 120px 0;
  background-image: url('@/assets/images/canvsimage/default.png');
  background-repeat: no-repeat;
  background-position: center;

  font-size: 16px;
  color: #00f6ff;
}
.subtitle {
  font-size: 30px;
}
</style>
